{% extends "base.html" %}

{% block title %}监测周报-微服务{% endblock %}

{% block head %}
{{ super() }}
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables button -->
<link rel="stylesheet" href="/static/bower_components/fx/buttons.bootstrap.min.css">
<!-- DataTables searchPanes -->
<link rel="stylesheet" href="/static/bower_components/fx/searchPanes.bootstrap.min.css">
<link rel="stylesheet" href="/static/bower_components/fx/select.bootstrap.min.css">
{% endblock %}

{% block content %}
<!-- 页面头 -->
<section class="content-header">
  <!--头部标题-->
  <h1>
    监测周报（微服务）
    <!--    <small>advanced tables</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li>监测数据</li>
    <li class="active">监测周报（微服务）</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <!--表格1-->
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">监测周报（微服务）</h3>
        </div>
        <div id="" class="box-body table-responsive">
          <table id="example" class="table table-condensed table-bordered" style="font-size: 90%;width:100%">
            <thead>
            <tr>
              <th>集群名</th>
              <th>年份</th>
              <th>周数</th>
              <th>日期范围</th>
              <th>服务</th>
              <th>健康度</th>
              <th>响应时间(ms)</th>
              <th>成功率</th>
              <th>请求次数/分钟</th>
            </tr>
            </thead>
          </table>
        </div>
        <!-- Loading (remove the following to stop the loading)-->
<!--        <div id="loading" class="overlay" style="display: block">-->
<!--          <i class="fa fa-refresh fa-spin"></i>-->
<!--        </div>-->
        <!-- end loading -->
      </div>
    </div>
  </div>
</section>


{% endblock %}


{% block script %}
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- DataTables buttons-->
<script src="/static/bower_components/fx/dataTables.buttons.min.js"></script>
<script src="/static/bower_components/fx/buttons.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/jszip.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>-->

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>-->
<script src="/static/bower_components/fx/buttons.html5.min.js"></script>
<!--<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>-->
<script src="/static/bower_components/fx/buttons.colVis.min.js"></script>

<!-- DataTables searchPanes-->
<script src="/static/bower_components/fx/dataTables.searchPanes.min.js"></script>
<script src="/static/bower_components/fx/searchPanes.bootstrap.min.js"></script>
<script src="/static/bower_components/fx/dataTables.select.min.js"></script>

<!-- Page specific script -->
<script>
    // 定义datatables自定义扩展按钮的功能
    $.fn.dataTable.ext.buttons.generate = {
        text: "手动生成",
        action: function (e, dt, node, config) {
            $('#loading').show();
            $.post('/scheduler/jobs/weekly_report_skw/run', function (data, status) {
                    console.log(data)
                    alert("执行结果" + status)
                    if (status === 'success') {
                        location.reload()
                    }
                }
            )
        }
    };

    // 页面载入后
    $(document).ready(function () {
        // $('#loading').hide();
        var table = $('#example').DataTable({
            ajax: '/api/v1/mon/weekly/service',
            columns: [
                {data: 'cluster'},
                {data: 'year'},
                {data: 'week'},
                {data: 'date_range'},
                {data: 'service'},
                {data: 'd_apdex'},
                {data: 'd_resp_time'},
                {data: 'd_sla'},
                {data: 'd_cpm'},
            ],
            order: [[1, 'desc'], [2, 'desc']],
            processing: true,
            language: {
                "url": "/static/language.json"
            },
            lengthChange: false,
            searchPanes: {
                initCollapsed: true,
                // cascadePanes: true
                columns: [0, 1, 2, 3, 4]
            },
            scrollX: true,
            responsive: true,
            autoWidth: true,
            stateSave: false,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            buttons: [
                'pageLength',
                {
                    extend: 'colvis',
                    collectionTitle: '显示/隐藏列'
                },
                'excel',
                'generate'
            ],
            columnDefs: [
                {
                    "targets": [],
                    "visible": false,
                }
            ],
            initComplete: function () {
                table.buttons().container().appendTo('#example_wrapper .col-sm-6:eq(0)')
                table.searchPanes.container().prependTo(table.table().container());
                table.searchPanes.resizePanes();
                table.columns.adjust().draw();
            }
        });


        // 根据URL的search参数，自动搜索
        let searchString = getQueryString('search')
        if (searchString !== '') {
            console.log(searchString)
            table.search(searchString);
            table.draw();
        }

        // 解决sidebar toogle之后，datatables标题行错位问题
        $('.sidebar-toggle').click(function () {
            $('.dataTables_scrollHeadInner').css('width', '100%');
            $('#example').css('width', '100%');
            setTimeout(function () {
                table.columns.adjust().draw();
            }, 400);
        });


    });


</script>
{% endblock%}